<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	li{list-style: none; width: 100px; height: 30px; background-color: yellow; margin: 10px;}
	#div1{width: 100px; height: 100px; background-color: red; margin: 200px;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var oUl = document.getElementById('ul1');
		var aLi = oUl.getElementsByTagName('li');

		for (var i = 0; i < aLi.length; i++) {
			aLi[i].draggable = "true";			//设置拖拽属性draggable

			aLi[i].ondragstart = function () {			//拖拽开始瞬间及以后
				this.style.backgroundColor = 'blue';
			}
/*
			aLi[i].ondrag = function () {
				document.title = i++;			//拖拽时（包括拖拽不动）连续触发
			}
*/
			aLi[i].ondragend = function () {			//拖拽结束时
				this.style.backgroundColor = 'yellow';
			}
		};
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>
	<div id="div1"></div>
</body>
</html>